<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>XmServer首页</title>
	<style>
	*{padding: 0;margin: 0;}
	.m-tab{
		margin: 0px;
		width: 100%;
	}
	.m-tab .hd{
		height: 40px;
		border-bottom: 1px solid #ccc;
	}
	.m-tab .hd a{
		float: left;
		_display: inline;
		padding: 0 20px;
		line-height: 38px;
		height: 39px;
		background-color: #f5f5f5;
		text-decoration: none;
		position: relative;
		border: 1px solid #ccc;
		color: #000;
		margin-right: 5px;
		-webkit-border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		border-radius: 5px 5px 0 0;
	}
	.m-tab .hd a:hover{text-decoration: none;color: #000;}
	.m-tab .hd .z-crt{
		background-color: #fff;
		border-bottom: 1px solid #fff;
	}
	.m-tab .bd div{
		display: none;
		min-height: 500px;
		height:100%;
		border: 1px solid #ccc;
		border-top: 0;
	}

	</style>
</head>
<body>
<div class="m-tab J_tab">
	<p class="hd J_card">
		<a href="javascript:;" class="z-crt">文件与目录列表</a>
		<a href="javascript:;">服务列表</a>
	</p>
	<div class="bd J_panel">
		<div style="display:block" data-count="1">
			<iframe id="tab1" name="tab1" src="http://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>
		</div>
		<div>
			<iframe id="tab2" name="tab2" src="http://www.baidu.com" width="100%" height="500" frameborder="0"></iframe>
		</div>
	</div>
</div>

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.tab.js"></script>
<script>
$(".J_tab").tab({
	eType:"click",
	card:".J_card a",
	panel:".J_panel div",
	curClass:"z-crt"
});
</script>
</body>
</html>